<template>
  <div id="spaceCheckPage">
    <!-- 加载容器：居中显示 -->
    <div class="loading-container">
      <!-- 加载动画 -->
      <!-- 延迟显示，避免闪烁 -->
      <a-spin
        size="large"
        tip="正在检查您的空间信息..."
        :delay="300"
      >
      <!-- 加载状态说明卡片 -->
      <div class="status-card">
        <div class="status-icon">
          <database-outlined />
        </div>
        <div class="status-text">
          <h3>空间验证中</h3>
          <p>我们正在为您检查空间状态，请稍候...</p>
        </div>
      </div>
      </a-spin>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useLoginUserStore } from '@/stores/userLogin'
import { useRouter } from 'vue-router'
import { listSpaceVoByPageUsingPost } from '@/api/spaceController'
import { message } from 'ant-design-vue'
import { onMounted } from 'vue'
import { DatabaseOutlined } from '@ant-design/icons-vue'

const router = useRouter()

// 获取获取当前登录用户
const loginUserStore = useLoginUserStore()

// 控制页面的跳转和判断
const checkUserSpaceAdd = async () => {
  const loginUSer = loginUserStore.loginUser
  if (!loginUSer?.id) {
    // 1. 用户未登录，跳转到登录页面
    await router.replace({
      path: '/user/login'
    })
  }
  // 2. 用户已登录，判断用户是否绑定了空间
  const res = await listSpaceVoByPageUsingPost({
    userId: loginUSer.id,
    pageSize: 1,
    current: 1,
    spaceType: 0 // 默认跳转个人空间
  })
  // 3. 判断是否创建了空间，
  if(res.data.code === 0 && res.data.data){
    if(res.data.data?.records && res.data.data?.records?.length > 0){
      const space = res.data.data.records[0];
      // 4. 创建了空间，则跳转到到空间详情页面
      await router.replace({
        path: `/space/${space.id}`
      })
    }else {
      // 没有则跳转到创建空间页面
      await router.replace({
        path: '/space/add'
      })
      message.warning('即将为您创建个人空间');
    }
  }else {
    message.error('获取空间信息失败' + res.data?.message);
  }
}

// 钩子函数，在页面挂载时执行
onMounted(() => {
  checkUserSpaceAdd();
})
</script>

<style scoped>
#spaceCheckPage {
  /* 页面铺满局：全屏显示 */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* 加载容器 */
.loading-container {
  width: 100%;
  max-width: 600px;
  min-height: 600px;
  padding: 40px;
}

/* 状态卡片 */
.status-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 20px;
}

/* 状态图标 */
.status-icon {
  font-size: 48px;
  color: #40a9ff; /* 蓝色图标，传达信任和专业感 */
  margin-bottom: 20px;
  opacity: 0.8;
}

/* 状态文字 */
.status-text h3 {
  margin: 0 0 10px 0;
  color: #1f2329;
  font-size: 18px;
  font-weight: 500;
}

.status-text p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
}

/* 适配小屏幕 */
@media (max-width: 480px) {
  .loading-container {
    padding: 20px;
  }

  .status-card {
    padding: 20px 15px;
  }

  .status-icon {
    font-size: 36px;
  }
}
</style>
